<template>
	<view :class="themeName">
		<view class="coupon-card">
			<view class="coupon-card__main">
				<view class="coupon-card__main-section">
					<text class="name m-b-12">{{ name }}</text>
					<text class="xxs lighter m-b-20" style="color: rgba(153, 153, 153, 1);">{{ time }}</text>
					<view class="xxs lighter flex">
						<view class="type-box flex row-center" v-for="item,idx in order_type_arr" :key="idx">{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="coupon-card__aside">
				<price :content="money" :prec="2" mainSize="60rpx" color="rgba(0, 50, 50, 1)" :prefix="null" suffix="元"
					:font-weight="700" />
				<text class="sm m-t-20">{{ condition }}</text>
			</view>
		</view>
		<view class="instructions bg-white" v-if="descShow">
			<view class=" flex row-between">
				<view class="flex" @click="showTips=!showTips">
					<view class="xs normal m-r-10">{{ desc.title }}</view>
					<u-icon :name="showTips==true?'arrow-up':'arrow-down'" size="24"></u-icon>
				</view>
				<view class="flex" v-if="button">
					<view :class="[
								'pendant', 
								'pendant-button',
								button.disable ? 'pendant-button--disable' : `pendant-button--${button.theme}`
							]" @tap="toTraver">{{ button.name }}</view>
					<view class="pendant pendant-button pendant-button--normal" @tap="toReport">使用明细</view>
				</view>
			</view>
			<view class="xs muted m-t-20" v-show="showTips==true">
				<view v-for="item in desc.content" :key="item">{{ item }}</view>
			</view>
		</view>
	</view>
</template>


<script>
	/**
	 * @description 优惠券卡片
	 * @property {String} mode 卡片模式[normal|get|radio] (默认值: normal) 
	 *   注：radio模式下需要配合u-radio-group标签
	 * 
	 */

	export default {
		name: 'CouponCard',

		props: {
			// 卡片模式
			mode: {
				type: String,
				default: 'normal',
			},

			// 优惠券ID
			couponId: {
				type: Number | String,
				default: ''
			},
			// 优惠券记录ID
			couponListId: {
				type: Number | String,
				default: ''
			},

			// 名称
			name: {
				type: String,
				default: ''
			},

			// 金额
			money: {
				type: String | Number,
				default: 0
			},

			// 使用条件
			condition: {
				type: String,
				default: ''
			},

			// 优惠方式
			conditionWay: {
				type: String,
				default: ''
			},

			// 使用时间
			time: {
				type: String,
				required: true
			},

			// 使用场景
			scene: {
				type: String,
				default: ''
			},

			// 按钮名称
			button: {
				type: Object | Boolean,
				// default: {
				// 	name: '领取',
				// 	theme: 'primary',
				// }
				default: false
			},

			// 是否已得到【get模式】
			gotten: {
				type: Boolean,
				default: false
			},

			// 是否选中【radio模式】
			checked: {
				type: Boolean,
				default: false
			},

			// 使用说明
			desc: {
				type: Object | Boolean,
				default: false
			},

			prefix: {
				type: String,
				default: '￥'
			},
			order_type_arr: {
				type: Array,
				default: () => {}
			}
		},

		data() {
			return {
				showTips: false
			}
		},

		computed: {
			// 优惠券卡片ID
			id() {
				return this.couponId
			},
			descShow() {
				return this.desc && (this.desc.title != '' || this.desc.content.length > 0)
			}
		},

		methods: {
			toTraver() {
				this.$Router.push('/bundle4/pages/travel/travel')
			},
			toReport() {
				this.$Router.push({
					path: '/bundle/pages/coupon/coupon_log',
					query: {
						id: this.couponListId
					}
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.coupon-card {
		display: flex;
		width: 100%;
		height: 182rpx;
		background: url(/bundle/static/images/conpon_card3.png) no-repeat;
		background-size: 100%;
		background-position: center;

		&__aside {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 212rpx;
			color: rgba(102, 102, 102, 1);
			height: 180rpx;
		}

		&__main {
			position: relative;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			height: 180rpx;

			.type-box {
				color: rgba(0, 50, 50, 1);
				font-size: 20rpx;
				width: 120rpx;
				height: 48rpx;
				margin-right: 10rpx;
				border-radius: 50rpx;
				background-color: rgba(240, 250, 250, 1);
			}

			&-section {
				width: 100%;
				display: flex;
				flex-direction: column;

				.name {
					height: 40rpx;
					color: rgba(38, 38, 38, 1);
					font-size: 30rpx;
					font-weight: 500;
				}

				.time {
					color: rgba(153, 153, 153, 1);
					font-size: 22rpx;
					font-weight: 400;
				}
			}

		}

	}

	.instructions {
		padding: 14rpx 35rpx;
		border-radius: 0 0 20rpx 20rpx;
		color: rgba(153, 153, 153, 1);

		.pendant {

			&-button {
				padding: 8rpx 0;
				border-radius: 60px;
				width: 150rpx;
				text-align: center;
				font-size: $-font-size-nr;
				margin-left: 10rpx;

				&--primary {
					color: #E6FF28;
					background: linear-gradient(90deg, #035959 0%, #003232 100%);
				}

				&--normal {
					border-width: 1px;
					border-style: solid;
					border-color: rgba(221, 221, 221, 1);
					color: rgba(102, 102, 102, 1);
				}

				&--muted {
					border: $-solid-border;
					color: $-color-muted;
				}

				&--disable {
					background-color: #F4F4F4;
					color: $-color-lighter;
				}
			}

			&--receive {
				height: 78rpx;
				width: 100rpx;
			}
		}
	}
</style>